<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .layui-table-cell {
            height: inherit;
        }

        body {
            background-color: rgba(192, 192, 192, 0.3);
        }
    </style>
</head>
<body>
<table class="layui-table" id="app" lay-filter="test">

</table>
<script>
    /*李英勇：视频查询*/


    let refreshToken = localStorage.getItem("refreshToken");
    let token = localStorage.getItem("token");
    layui.use(['jquery', 'layer', 'table'], function () {
        let $ = layui.jquery, layer = layui.layer, table = layui.table;

        //第一个实例
        table.render({
            elem: '#app'
            , url: 'findVideoByTeacherid' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'vid', title: 'ID', width: 100, sort: true}
                , {field: 'knowledge', title: '知识点', width: 100}
                , {field: 'content', title: '描述', width: 100}
                , {field: 'comments', title: '评论数', width: 100, sort: true}
                , {field: 'thumbsup', title: '点赞数', width: 100, sort: true}
                , {field: 'views', title: '访问数', width: 100, sort: true}
                , {
                    field: 'open', title: '公开等级', width: 100, templet: function (data) {
                        if (data.open == 0) {
                            return "市级";
                        } else if (data.open == 1) {
                            return "校级";
                        } else if (data.open == 2) {
                            return "班级";
                        }
                    }
                }
                , {field: 'date', title: '上传时间', width: 100}
                , {field: '', title: '操作', width: 250, toolbar: "#btn", align: "center"}
                , {
                    field: 'path', title: '视频预览', width: 250, templet: function (d) {
                        return '<video class="videoContent" controls="controls" style="width:200px;height: 100px" poster="img/poster.png"><source src="/classteacher' + d.path + '" type="video/mp4"/></video>';
                    }
                }
            ]],
            limit: 3,
            headers: {refreshToken: refreshToken, token: token},
            done: function (res, curr, count) {

            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            console.log(data, layEvent);
            if (layEvent === 'detail') {
                layer.msg('查看操作');
                localStorage.setItem("vid", obj.data.vid);
                obj.update({
                    views: obj.data.views += 1
                });
                layer.open({
                    type: 2,
                    title: "视频详情",
                    maxmin: true,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['1000px', '550px'], //宽高
                    content: 'videoDetail.html',
                    cancel: function (index, layero) {
                        //son_msg就是子页面中的msg数据
                        /* var son_msg = $(layero).find("iframe")[0].contentWindow.callBackMsg();
                         alert(son_msg);*/
                        table.reload('app', {
                            url: 'findVideoByTeacherid'
                        });
                    }

                });
            } else if (layEvent === 'del') {
                layer.confirm('确认删除?', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: "del",
                        data: {"vid": obj.data.vid},
                        type: "post",
                        headers: {"refreshToken": refreshToken, "token": token},
                        success: function (res, status, xhr) {
                            if (res.code == 0) {
                                layer.msg(res.msg);
                                if (xhr.getResponseHeader("token") != null) {
                                    //更新本地token
                                    localStorage.setItem("token", res.headers.token);
                                }
                            }
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
                localStorage.setItem("vid", obj.data.vid);
                layer.open({
                    type: 2,
                    title: "编辑视频说明",
                    maxmin: true,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['800px', '550px'], //宽高
                    content: 'editVideo.html',
                    cancel: function (index, layero) {
                        table.reload('app', {
                            url: 'findVideoByTeacherid'
                        });
                    }

                });

            }
        });

    });
</script>
<script type="text/html" id="btn">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn" lay-event="detail">查看</button>
        <button type="button" class="layui-btn" lay-event="edit">编辑</button>
        <button type="button" class="layui-btn layui-btn-danger" lay-event="del">删除</button>
    </div>
</script>
</body>
</html>